import 'package:auto_route/auto_route.dart';
import 'package:convergence_media/navigator/app_router.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

@RoutePage()
class MainScreen extends ConsumerWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return AutoTabsRouter(
      routes: const [
        NewsRoute(),
        VideoRoute(),
        CircleRoute(),
        ServiceRoute(),
      ],
      transitionBuilder: (context, child, animation) => child,
      builder: (context, child) {
        final tabsRouter = AutoTabsRouter.of(context);
        return SafeArea(
          child: Scaffold(
            body: child,
            bottomNavigationBar: _AppBottomNavigationBar(
              onSelect: tabsRouter.setActiveIndex,
              index: tabsRouter.activeIndex,
              items: [
                _AppBottomNavigationBarItem(
                  icon: Icons.home_outlined,
                  label: '首页',
                ),
                _AppBottomNavigationBarItem(
                  icon: Icons.chrome_reader_mode_outlined,
                  label: '视频',
                ),
                _AppBottomNavigationBarItem(
                  icon: Icons.dynamic_feed_rounded,
                  label: '发现',
                ),
                _AppBottomNavigationBarItem(
                  icon: Icons.manage_accounts_outlined,
                  label: '服务',
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class _AppBottomNavigationBarItem {
  _AppBottomNavigationBarItem({
    required this.icon,
    required this.label,
  });

  final String label;
  final IconData icon;
}

class _AppBottomNavigationBar extends ConsumerWidget {
  const _AppBottomNavigationBar({
    required this.index,
    required void Function(int) onSelect,
    required List<_AppBottomNavigationBarItem> items,
  })  : _onSelect = onSelect,
        _items = items;

  final List<_AppBottomNavigationBarItem> _items;
  final void Function(int index) _onSelect;
  final int index;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final themeData = Theme.of(context);
    // final currentIndex = ref.watch(appBottomNavigationBarControllerProvider);

    // 底部导航按钮组装
    final children = <Widget>[];
    for (var i = 0; i < _items.length; i++) {
      children.add(
        Expanded(
          child: _BottonAppBarItem(
            icon: _items[i].icon,
            label: _items[i].label,
            isSelect: i == index,
            onSelect: () => _onSelect(i),
          ),
        ),
      );
    }

    // 发布按钮
    children.insert(
      2,
      Expanded(
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 10),
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            color: themeData.primaryColor,
          ),
          child: const Icon(Icons.add),
        ),
      ),
    );

    return BottomAppBar(
      shape: const CircularNotchedRectangle(),
      child: Row(
        children: children,
      ),
    );
  }
}

class _BottonAppBarItem extends StatelessWidget {
  const _BottonAppBarItem({
    required this.icon,
    required this.label,
    required this.isSelect,
    required this.onSelect,
  });
  final IconData icon;
  final String label;
  final bool isSelect;
  final void Function() onSelect;

  @override
  Widget build(BuildContext context) {
    final themeData = Theme.of(context);
    return IconButton(
      iconSize: 64,
      onPressed: onSelect,
      icon: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: Icon(
              icon,
              size: 24,
              color: isSelect ? themeData.primaryColor : Colors.black54,
            ),
          ),
          Expanded(
            child: Text(
              label,
              style: themeData.textTheme.labelLarge?.copyWith(
                color: isSelect ? null : Colors.black38,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
